<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form
					ref="ruleForm"
					:model="queryData"
					label-width="100px"
					label-suffix=":"
					:inline="true"
					class="search-form"
				>
					<div class="flex">
						<div class="left">
							<el-form-item
								:label="`${$t('dxn.game_list.hand_id')}`"
								prop="id"
							>
								<el-input
									v-model.trim="queryData.id"
									v-input="{ name: 'symbols' }"
									clearable
									style="width: 250px"
									:placeholder="
										`${$t(
											'dxn.game_list.hand_id_placeholder'
										)}`
									"
								></el-input>
							</el-form-item>
							<el-form-item>
								<el-button
									type="primary"
									icon="el-icon-search"
									size="small"
									:disabled="disabledSearch"
									:loading="disabledSearch"
									@click="handleSearch"
								>
									{{ $t('dxn.card_ables_list.search') }}
								</el-button>
								<el-button
									v-if="hasPermission('90750077')"
									type="warning"
									icon="el-icon-download"
									size="small"
									:loading="exportBtnLoading"
									:disabled="disabledSearch"
									@click="exportExcel"
								>
									{{ $t('dxn.card_ables_list.export_excel') }}
								</el-button>
							</el-form-item>
						</div>
						<div class="right">
							<el-form-item>
								<el-button
									type="primary"
									size="small"
									class="back"
									@click="back"
								>
									{{ $t('dxn.card_ables_list.back') }}
								</el-button>
							</el-form-item>
						</div>
					</div>
				</el-form>
			</div>
			<div class="content">
				<span>{{ $t('dxn.card_ables_list.basic_info') }}</span>
				<el-divider></el-divider>
				<div
					class="container"
					v-loading="disabledSearch"
					element-loading-spinner="el-icon-loading"
				>
					<el-table
						size="mini"
						class="small-size-table"
						border
						:data="list"
						style="width: 100%"
						:header-cell-style="getRowClass"
						highlight-current-row
						header-align="center"
						default-expland-all="true"
					>
						<el-table-column
							prop="name"
							:label="`${$t('dxn.game_list.hand_id')}`"
							min-width="190"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{ scope.row.handCode || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							:label="`${$t('dxn.card_ables_list.table_id')}`"
							min-width="190"
							align="center"
						>
							<template slot-scope="scope">
								<div
									v-if="scope.row.tableCode"
									class="blueColor decoration"
									@click="
										handleJump({
											path:
												'/dxn/gameManager/cardTablesList/cardTablesBase',
											query: {
												tableId: scope.row.tableCode
											}
										})
									"
								>
									{{ scope.row.tableCode }}
								</div>
								<div v-else>-</div>
							</template>
						</el-table-column>
						<el-table-column
							:label="`${$t('dxn.card_ables_list.table_name')}`"
							min-width="120"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{ scope.row.tableName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							:label="`${$t('dxn.card_ables_list.game_name')}`"
							min-width="120"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{
									typeFilter(
										scope.row.gameTypeId,
										'gameTypes'
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							label="特殊玩法"
							min-width="120"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{
									getTypeName(
										scope.row.specialPlayType,
										specialPlayTypeArr
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							label="鱿鱼获得玩家"
							min-width="120"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{ scope.row.squidWinUserName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							:label="
								`${$t('dxn.card_ables_list.blind_injection')}`
							"
							min-width="120"
							align="center"
						>
							<template slot-scope="scope">
								<ShowBlindInjection
									:gameTypeId="scope.row.gameTypeId"
									:bbBlindScore="scope.row.bbBlindScore"
									:sbBlindScore="scope.row.sbBlindScore"
									:anteSwitch="scope.row.anteSwitch"
									:anteScore="scope.row.anteScore"
									:straddleAmount="scope.row.straddleAmount"
								/>
							</template>
						</el-table-column>
						<el-table-column
							:label="`${$t('dxn.card_ables_list.club_id')}`"
							min-width="100"
							align="center"
						>
							<template slot-scope="scope">
								<div
									v-if="scope.row.clubId"
									class="blueColor decoration"
									@click="
										handleJump({
											path: '/dxn/clubManager/clubList',
											query: {
												clubId: scope.row.clubId
											}
										})
									"
								>
									{{ scope.row.clubId }}
								</div>
								<div v-else>-</div>
							</template>
						</el-table-column>
						<el-table-column
							:label="`${$t('dxn.card_ables_list.club_name')}`"
							min-width="160"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{ scope.row.clubName || '-' }}
							</template>
						</el-table-column>
						<!-- <el-table-column
							:label="`${$t('dxn.card_ables_list.member_account')}`"
							min-width="100"
							align="center"
						>
							<template slot-scope="scope">
								<div
									v-if="!!scope.row.id || scope.row.id + '' === '0'"
									class="blueColor decoration"
									@click="
										handleJump({
											path: '/member/memberManage/memberDetails',
											query: {
												id: scope.row.id
											}
										})
									"
								>
									{{ scope.row.id }}
								</div>
								<div v-else>-</div>
							</template>
						</el-table-column> -->
					</el-table>
					<div style="margin-top:30px"></div>
					<el-table
						ref="dataTable"
						size="mini"
						class="small-size-table"
						border
						:data="list"
						style="width: 100%"
						:header-cell-style="getRowClass"
						highlight-current-row
						header-align="center"
					>
						<el-table-column
							:label="
								`${$t('dxn.card_ables_list.member_account')}`
							"
							min-width="160"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{ scope.row.userNames || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							:label="`${$t('dxn.card_ables_list.member_name')}`"
							min-width="160"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{ scope.row.nickNames || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							:label="
								`${$t('dxn.card_ables_list.handle_start_time')}`
							"
							min-width="120"
							align="center"
						>
							<template slot-scope="scope">
								{{ parseTime(scope.row.handBeginTime) || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							:label="
								`${$t('dxn.card_ables_list.handle_end_time')}`
							"
							min-width="120"
							align="center"
						>
							<template slot-scope="scope">
								{{ parseTime(scope.row.handEndTime) || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							:label="`${$t('dxn.card_ables_list.hand_brand')}`"
							min-width="80"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{ scope.row.handNum || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							:label="`初期金额汇总`"
							min-width="150"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{
										handleNumber(
											scope.row.currency,
											scope.row.beforeChip
										)
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							:label="
								`${$t(
									'dxn.game_list.summary_of_amounts_brought_in'
								)}`
							"
							min-width="120"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{
										handleNumber(
											scope.row.currency,
											scope.row.bringMidwayChip
										)
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							:label="`末期余额汇总`"
							min-width="120"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{
										handleNumber(
											scope.row.currency,
											scope.row.afterChip
										)
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							:label="
								`${$t('dxn.game_list.effective_bottom_pool')}`
							"
							min-width="100"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{
										handleNumber(
											scope.row.currency,
											scope.row.validPot
										)
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							:label="
								`${$t(
									'dxn.card_ables_list.play_cards_pump_water'
								)}`
							"
							min-width="110"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{
										handleNumber(
											scope.row.currency,
											scope.row.pumpingAmount
										)
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							label="经典保险盈亏"
							min-width="120"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span
									:style="
										handleNumberColor(
											scope.row.insuredNetAmount
										)
									"
								>
									{{
										handleNumber(
											scope.row.currency,
											scope.row.insuredNetAmount
										)
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							label="EV保险盈亏"
							min-width="120"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{
										handleNumber(
											scope.row.currency,
											scope.row.evInsuredNetAmount
										)
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							:label="
								`${$t(
									'dxn.card_ables_list.summary_of_member_wins_and_losses'
								)}`
							"
							min-width="110"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span
									:style="
										handleNumberColor(
											scope.row.handNetAmount
										)
									"
								>
									{{
										handleNumber(
											scope.row.currency,
											scope.row.handNetAmount
										)
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							:label="
								`${$t(
									'dxn.game_list.public_brand_information'
								)}`
							"
							:min-width="tableColumnWidth.publicCards"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<div id="showPublicCardsDiv">
									<template
										v-if="
											!scope.row.publicCards ||
												scope.row.publicCards === '[]'
										"
									>
										-
									</template>
									<template v-else>
										<span
											v-for="(item,
											index) in getCardsImage(
												scope.row.publicCards
											)"
											:key="index"
										>
											<el-image
												class="hand-card-img"
												:class="{
													'hand-card-space':
														index === 3
												}"
												:src="item"
												fit="contain"
											></el-image>
										</span>
									</template>
								</div>
							</template>
						</el-table-column>
						<el-table-column
							:label="`${$t('dxn.game_list.start_hand_info')}`"
							:min-width="tableColumnWidth.handInfos"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<div id="showHandInfosDiv">
									<template
										v-if="
											!scope.row.handInfos ||
												scope.row.handInfos === '[]'
										"
									>
										-
									</template>
									<template v-else>
										<span
											v-for="(item,
											index) in getHandsInfoCardsImage(
												scope.row.handInfos
											)"
											:key="index"
										>
											<el-image
												class="hand-card-img"
												:class="{
													'hand-card-space-right':
														index % 2 === 1
												}"
												:src="item"
												fit="contain"
											></el-image>
										</span>
									</template>
								</div>
							</template>
						</el-table-column>
						<el-table-column
							:label="
								`${$t('dxn.game_list.settlement_information')}`
							"
							min-width="160"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{ scope.row.settleInfo || '-' }}
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="content">
				<span>{{ $t('dxn.card_ables_list.perm_info') }}</span>
				<el-divider></el-divider>
				<el-button
					type="primary"
					size="small"
					@click="handleClick"
					:disabled="disabledSearch"
				>
					{{ $t('dxn.game_list.game_replay') }}
				</el-button>
			</div>
		</div>

		<GameReplay
			:dialogVisible.sync="gameReplay.visible"
			:dialogLoading="gameReplay.loading"
			:replayDetail="gameReplay.replayDetail"
			:replayList="gameReplay.replayList"
			:replayReqResult="gameReplay.replayReqResult"
		/>
	</div>
</template>

<script>
import { routerNames } from '@/utils/consts'
import list from '@/mixins/list'
import GameReplay from '@/components/GameReplay'
import { getGameReplayDetail, getCardsImgArr } from '@/utils/replay'
import { specialPlayTypeArr } from '@/dict/dxn'
import ShowBlindInjection from '@/components/Dxn/ShowBlindInjection'
export default {
	name: routerNames.gameBase,
	components: {
		GameReplay,
		ShowBlindInjection
	},
	mixins: [list],
	data() {
		return {
			disabledSearch: false,
			queryData: {
				id: ''
			},
			handStatus: 0, // 2为异常局
			replayQuery: {
				// pageNo: 1, // 默认为1
				// pageSize: 20, // 默认20
				roundNo: 0, // 手牌num
				tableId: 0 // 牌桌Id
			}, // 回放数据查询条件
			gameReplay: {
				visible: false, // 回放弹窗可见
				loading: false, // 回放加载
				replayDetail: {}, // 回放详情
				replayList: [], // 回放列表
				replayReqResult: '' // 回放接口数据请求结果
			},
			exportBtnLoading: false,
			specialPlayTypeArr,
			tableColumnWidth: {
				publicCards: 160,
				handInfos: 160
			}
		}
	},
	watch: {
		$route: function(to, from) {
			if (
				to.path.indexOf(routerNames.gameBase) > -1 &&
				this.$route.query.handId
			) {
				this.queryData.id = this.$route.query.handId
				this.handleSearch()
			}
		}
	},
	created() {
		if (this.$route.query.handId) {
			this.queryData.id = this.$route.query.handId || ''
		}
	},
	methods: {
		exportExcel() {
			if (this.queryData.id) {
				const params = { ...this.queryData }
				this.exportBtnLoading = true
				this.exportExcelPublic({
					api: 'exportHandCardDetail',
					params
				}).finally(() => {
					this.exportBtnLoading = false
				})
			} else {
				this.$message.closeAll()
				this.$message.error('无相关数据')
			}
		},
		handleSearch() {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					this.list = []
					this.loadData()
				} else {
					return false
				}
			})
		},
		back() {
			this.$router.go(-1)
		},
		loadData() {
			this.list = []
			this.handStatus = 0
			this.replayQuery = {
				tableId: 0,
				roundNo: 0
			}
			if (this.queryData.id) {
				const params = {
					...this.queryData
				}
				this.disabledSearch = true
				this.$api
					.getDxhandDetailBend(params)
					.then((res) => {
						if (res?.code === 200) {
							const len = Object.keys(res.data).length
							this.list = len ? [res.data] : []
							this.handStatus = res?.data?.handStatus
							this.replayQuery = {
								tableId: res?.data?.tableId,
								roundNo: res?.data?.handNum
							}
							this.renderTableColumnWidth()
						}
						// this.total = len ? this.list.length : 0
					})
					.catch(() => {})
					.finally(() => {
						this.disabledSearch = false
					})
			}
		},
		getCardsImage(cardsStr) {
			let imageArr = []
			const cardsNumReplaceStr = cardsStr.replace(/[\[\]]/g, '')
			if (cardsNumReplaceStr) {
				imageArr = getCardsImgArr(cardsNumReplaceStr.split(','))
			}
			return imageArr
		},
		getHandsInfoCardsImage(handInfos) {
			let handsInfoCardsArr = []
			const handInfosReplaceStr = handInfos
				.replace(/[\[\]]/g, '')
				.replace(/\;/g, ',')
			if (handInfosReplaceStr) {
				handsInfoCardsArr = getCardsImgArr(
					handInfosReplaceStr.split(',')
				)
			}
			return handsInfoCardsArr
		},
		// 动态获取列宽度
		renderTableColumnWidth() {
			this.$refs.dataTable.$nextTick((_) => {
				const publicCardsWidth =
					document.getElementById('showPublicCardsDiv')?.offsetWidth +
					24
				const handInfoWidth =
					document.getElementById('showHandInfosDiv')?.offsetWidth +
					24

				this.tableColumnWidth = {
					publicCards:
						publicCardsWidth > 120 ? publicCardsWidth : 120,
					handInfos: handInfoWidth > 120 ? handInfoWidth : 120
				}
			})
			// setTimeout(() => {

			// }, 100)
		},
		// 跳转
		handleJump(obj) {
			this.$router.push(obj)
		},
		// 跳转到牌局回放
		handleClick() {
			if (!this.replayQuery.tableId) {
				this.$message.warning('请先查询手牌ID')
				return
			}
			// if (this.handStatus === 2) {
			// 	this.$message.warning('牌局异常，玩家下注金额已原路退回')
			// 	return
			// }
			this.gameReplay = {
				visible: true,
				loading: true,
				replayDetail: {
					info: {
						handId: ''
					},
					handStatus: undefined
				},
				replayList: [],
				replayReqResult: ''
			}
			if (this.handStatus === 0) {
				this.gameReplay.replayDetail.info.handId = this.queryData.id
				this.gameReplay.replayReqResult = '没有记录'
				this.gameReplay.loading = false
				return false
			}
			getGameReplayDetail(this)
				.then((ret) => {
					this.gameReplay.replayDetail = ret.replayDetail
					this.gameReplay.replayList = ret.replayList
				})
				.catch((ret) => {
					this.gameReplay.replayReqResult = ret.message
				})
				.finally(() => {
					this.gameReplay.replayDetail.info.handId = this.queryData.id
					this.gameReplay.replayDetail.handStatus = this.handStatus
					this.gameReplay.loading = false
				})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-range-input {
	background: #fff;
}
.params {
	.search-form {
		.flex {
			display: flex;
			justify-content: space-between;
			.right {
				flex: 1;
				display: flex;
				justify-content: flex-end;
			}
		}
	}
}
.decoration {
	text-decoration: underline;
	cursor: pointer;
}
.hand-card-img {
	width: 27px;
	height: 36px;
}
.hand-card-space {
	margin-left: 5px;
}
.hand-card-space-right {
	margin-right: 5px;
}
#showPublicCardsDiv,
#showHandInfosDiv {
	white-space: nowrap;
	display: inline-block;
}
</style>
